<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <div
          style="display: flex; justify-content: center; margin-bottom: 50px"
        >
          <el-form
            :model="form"
            :rules="rules"
            ref="userForm"
            size="mini"
            label-width="100px"
          >
            <el-radio v-model="applyStatus" label="FAIL">拒绝</el-radio>
            <el-radio v-model="applyStatus" label="DOING">待审核</el-radio>
            <el-radio v-model="applyStatus" label="SUCCESS">通过</el-radio>
          </el-form>
        </div>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')"
            >取 消
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="saveDialogBtn('userForm')"
            >确 定
          </el-button>
        </div>
      </template>
    </yj-dialog>

    <yj-dialog
      :modal="dialog2.modal"
      :width="dialog2.width"
      :title="dialog2.title"
      :dialogVisible="dialog2.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <div
          style="display: flex; justify-content: center; margin-bottom: 50px"
        >
          <div
            style="
              border-radius: 10px;
              border: 1px solid #ebebeb;
              padding: 20px;
            "
            v-html="content"
          ></div>
        </div>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialog2Btn('userForm')"
            >取 消
          </el-button>
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
      :that="prop.that"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <auth code="">
          <template slot="auth"> </template>
        </auth>
      </template>

      <template slot="columns">
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="deleted"
          label="是否已删除"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.deleted" size="mini" type="danger"
              >已删除</el-tag
            >
            <el-tag v-else size="mini" type="success">正常</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="deleted"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.auditStatus == 'DOING'"
              size="mini"
              type="danger"
              >待审核</el-tag
            >
            <el-tag
              v-else-if="scope.row.auditStatus == 'FAIL'"
              size="mini"
              type="danger"
              >审核不通过</el-tag
            >
            <el-tag v-else size="mini" type="success">已发布</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="avatar"
          label="头像"
        >
          <template slot-scope="scope">
            <el-image
              fit="cover"
              style="width: 50px; height: 50px"
              :preview-src-list="[scope.row.userInfo.avatar]"
              :src="scope.row.userInfo.avatar"
            />
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="realName"
          label="发布人"
        >
          <template slot-scope="scope">
            {{ scope.row.userInfo.realName }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="realName"
          label="联系电话"
        >
          <template slot-scope="scope">
            {{ scope.row.userInfo.userPhone }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="realName"
          label="联系微信"
        >
          <template slot-scope="scope">
            {{ scope.row.userInfo.wechatId }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="content"
          label="兼职内容"
        ></el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="schoolName"
          label="学校"
        ></el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="urgentState"
          label="紧急状态"
        >
          <template slot-scope="scope">
            {{ scope.row.urgentState == "urgent" ? "紧急" : "正常" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <auth :code="permission.view">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-view"
                  type="text"
                  @click="viewContent(scope.row)"
                  size="mini"
                  slot="auth"
                  >查看内容
                </el-button>
              </template>
            </auth>

            <auth :code="permission.applyStatus">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-setting"
                  type="text"
                  @click="applyStatusFun(scope.row)"
                  size="mini"
                  slot="auth"
                  >审核
                </el-button>
              </template>
            </auth>

            <auth :code="permission.remove">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-delete"
                  type="text"
                  @click="del(scope.row.id)"
                  size="mini"
                  slot="auth"
                  >删除
                </el-button>
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
import formUtils from "../../../utils/form.js";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      applyStatus: "DOING",
      productNo: "",
      dialog: {
        width: "40%",
        title: "审核",
        visible: false,
        modal: true,
      },
      dialog2: {
        width: "40%",
        title: "审核",
        visible: false,
        modal: true,
      },
      content: "",
      prop: {
        searchShow: true,
        operateShow: false,
        location: " 兼职信息 / 兼职信息列表",
        getDataUrl: "/partTimeJob/pageList",
        removeUrl: "/partTimeJob/delete/?",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: true,
        isPage: true,
        delBtnPermission: "partTimeJob:del",
        that: this,
      },
      CONST: {
        status: { ON: "ON", OFF: "OFF" },
      },
      productImgs: [],
      form: {},
      formStrInit: "",

      permission: {
        view: "partTimeJob:list",
        remove: "partTimeJob:del",
        applyStatus: "partTimeJob:update:status",
      },

      URL: {
        remove: "/partTimeJob/delete/?",
        applyStatus: "/partTimeJob/update/auditStatus",
      },
    };
  },
  created() {},
  methods: {
    // 查看内容
    viewContent(row) {
      this.content = row.content;
      this.dialog2.visible = true;
    },
    cancelDialog2Btn() {
      this.dialog2.visible = false;
    },

    applyStatusFun(row) {
      this.applyStatus = row.auditStatus;
      this.productNo = row.jobCode;
      this.dialog.visible = true;
    },
    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
    },

    closeDialog() {
      this.$emit("closeModal", false);
    },

    saveDialogBtn(form) {
      this.$put(this.URL.applyStatus, {
        status: this.applyStatus,
        jobCode: this.productNo,
      }).then((res) => {
        if (res.R) {
          this.$success(res.msg);
          this.dialog.visible = false;
          this.reloadTable();
        }
      });
    },

    del(id) {
      formUtils.delete(this, this.URL.remove.replace("?", id), true, "", null);
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
    monitorRowExpandChange(res) {
      let that = this;
      that.productImgs = [];
      if (res.expand) {
        let loading = Loading.service({});
        that
          .$get(
            that.URL.getProductImg.replace("?", res.row.productNo),
            {},
            false
          )
          .then((r) => {
            loading.close();
            r.data.forEach((e) => {
              that.productImgs.push(e.imgUrl);
            });
          });
      }
    },
  },
};
</script>
<style>
</style>
<style scoped>
.operate-btn {
  margin: 0 5px;
}

.delele-img {
  font-size: 14px;
  width: 178px;
  cursor: pointer;
  text-align: center;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.img-div {
  display: flex;
}
</style>
